<%@page contentType="text/html; charset=UTF-8" trimDirectiveWhitespaces="true" pageEncoding="UTF-8"%>
<html>
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width,initial-scale=1,minimum-scale=1,maximum-scale=1,user-scalable=no" />
    <title>欢迎使用洲马云</title>
    <link rel="stylesheet" type="text/css" href="${pageContext.request.contextPath}/static/admin/layui/css/layui.css" media="all">
    <link rel="stylesheet" type="text/css" href="${pageContext.request.contextPath}/static/admin/style/admin.css" media="all">
    <link rel="stylesheet" type="text/css" href="${pageContext.request.contextPath}/static/admin/style/login.css" media="all">
    <script type="text/javascript">
        function checkParent() {
            if (window.parent.length > 0) {
                window.parent.location = "login.jsp";
            }
        }
    </script>
</head>

<body onload="checkParent();">
<div class="layadmin-user-login layadmin-user-display-show" id="LAY-user-login" style="display: none;">
    <div class="layadmin-user-login-main">
        <div class="layadmin-user-login-box layadmin-user-login-header">
            <h2>layuiAdmin</h2>
            <p>layui 官方出品的单页面后台管理模板系统</p>
        </div>
        <form id="loginForm" class="layui-form" action="${pageContext.request.contextPath}/loginAuth">
            <input type="hidden" id="msg" value="${requestScope.msg}">
            <div class="layadmin-user-login-box layadmin-user-login-body layui-form">
                <div class="layui-form-item">
                    <label class="layadmin-user-login-icon layui-icon layui-icon-username" for="LAY-user-login-username"></label>
                    <input type="text" name="username" id="LAY-user-login-username" lay-verify="required" placeholder="用户名" class="layui-input">
                </div>
                <div class="layui-form-item">
                    <label class="layadmin-user-login-icon layui-icon layui-icon-password" for="LAY-user-login-password"></label>
                    <input type="password" name="password" id="LAY-user-login-password" lay-verify="required" placeholder="密码" class="layui-input">
                </div>
                <div class="layui-form-item">
                    <div class="layui-row">
                        <div class="layui-col-xs7">
                            <label class="layadmin-user-login-icon layui-icon layui-icon-vercode" for="verity"></label>
                            <input type="text" name="vercode" id="verity" lay-verify="required" placeholder="图形验证码" class="layui-input">
                            <input type="hidden" id="verityc">
                        </div><br>
                        &nbsp;&nbsp;&nbsp;<span id="discode"></span>
                        <a href="#" onClick="createCode()">换一换</a>
                    </div>
                </div>
                <div class="layui-form-item">
                    <button class="layui-btn layui-btn-fluid" lay-submit lay-filter="login">登 入</button>
                </div>
            </div>
        </form>
    </div>
</div>
<script src="${pageContext.request.contextPath}/static/admin/layui/layui.js" type="text/javascript" charset="utf-8"></script>
<script>
    layui.use(['form', 'layedit', 'laydate'], function() {
        var form = layui.form,
            layer = layui.layer;

        //自定义验证规则
        form.verify({
            title: function(value) {
                if(value.length < 5) {
                    return '标题至少得5个字符啊';
                }
            },
            password: [/(.+){6,12}$/, '密码必须6到12位'],
            verity: [/(.+){6}$/, '验证码必须是6位'],
        });

        //监听提交
        form.on('submit(login)', function(data) {
            var inputCode = document.getElementById("verity").value.toUpperCase();
            if (inputCode != code) {
                layer.msg("验证码错误");
                createCode();
                document.getElementById("verity").value = "";
                return false;
            } else {
                var form = document.getElementById('loginForm');
                form.submit();
                return false;
            }
        });

        var msg = document.getElementById("msg").value;
        console.log(msg);
        if (msg == 1) {
            layer.msg("用户名或密码错误");
            return false;
        }
    });

    var code ;
    window.onload = createCode;
    function createCode(){
        code = "";
        var codeLength = 4;
        var random = new Array(0,1,2,3,4,5,6,7,8,9,'A','B','C','D','E','F','G','H','I','J','K','L','M','N','O','P','Q','R',
            'S','T','U','V','W','X','Y','Z');
        for(var i = 0; i < codeLength; i++) {
            var index = Math.floor(Math.random() * 36);
            code += random[index];
        }
        document.getElementById("discode").style.fontFamily = "Fixedsys";
        document.getElementById("discode").style.letterSpacing = "5px";
        document.getElementById("discode").style.color = "#0ab000";
        document.getElementById("discode").innerHTML = code;
        document.getElementById("verityc").value = code;
    }
</script>
</body>
</html>
